<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>添加个人信息并排序</title>
    <link rel="stylesheet" href="../css/add_info.css">
    <link rel="stylesheet" href="../css/all.css">
    <link rel="stylesheet" href="../css/show_info.css">

</head>
<body>
    <div id="main">
        <div class="add_info">
            <h2>添加个人信息</h2>
            <ul>
                <li><span>姓名</span><input type="text" v-model="name"></li>
                <li><span>性别</span><input type="radio" name="sex" id="sex" value="1" v-model="sex">男
                     <input type="radio" name="sex" id="sex" value="0" v-model="sex">女</li>
                <li><span>年龄</span><input type="text" v-model="age"></li>
                <li><span>电话</span><input type="text" v-model="phone"></li>
                <li><span>擅长语言</span><select name="goods" id="goods" v-model="good">
                    <option value="JavaScript">JavaScript</option>
                    <option value="C">C</option>
                    <option value="C++">C++</option>
                    <option value="C#">C#</option>
                    <option value="Java">Java</option>
                    <option value="Python">Python</option>
                    <option value="Go">Go</option>
                    <option value="R">R</option>
                    <option value="Ruby">Ruby</option>
                </select></li>
                <li><span>兴趣爱好</span>
                    <input type="checkbox" name="habit" id="habit" value="0" v-model="habit">篮球
                    <input type="checkbox" name="habit" id="habit" value="1" v-model="habit">足球
                    <input type="checkbox" name="habit" id="habit" value="2" v-model="habit">排球
                    <input type="checkbox" name="habit" id="habit" value="3" v-model="habit">羽毛球
                    <input type="checkbox" name="habit" id="habit" value="4" v-model="habit">乒乓球
                    <input type="checkbox" name="habit" id="habit" value="5" v-model="habit">毽球
                    <input type="checkbox" name="habit" id="habit" value="6" v-model="habit">游泳
                    <input type="checkbox" name="habit" id="habit" value="7" v-model="habit">跑步
                    <input type="checkbox" name="habit" id="habit" value="8" v-model="habit">健身
                </li>
            </ul>
            <button class="submit" @click="submit_info">提交</button>

        </div>
        <div class="show_info">
            <button class="sort_btn" @click=get_sort>排序</button>
            <table>
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>电话</th>
                    <th>擅长语言</th>
                    <th>兴趣爱好</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item,index) in users" :key="item.id">
                    <td>{{item.name}}</td>
                    <td>{{item.sex==1?"男":"女"}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.phone}}</td>
                    <td>{{item.good}}</td>
                    <td>{{item.habit | get_habit }}</td>   
                    <td><button id="del_btn" @click="del(index)">删除</button></td>
                </tr>
            </table>
        </div>
    </div>

    <script>
        /*| get_habit*/
        let app = new Vue({
            el:'#main',
            data:{
                id: 0,
                name:"",
                sex:"",
                age:"",
                phone:"",
                good:"",
                habit:[],
                num : 0,
                users:[{
                        name:"张三",
                        sex:"0",
                        age:18,
                        phone:1592837512,
                        good:"JavaScript",
                        habit:["0"],
                    },
                    {
                        name:"李四",
                        sex:"0",
                        age:19,
                        phone:1592837512,
                        good:"C",
                        habit:["0","1","2"],
                    },
                    {
                        name:"王五",
                        sex:"1",
                        age:16,
                        phone:1592837512,
                        good:"Python",
                        habit:["0","4","5"],
                    },
                    {
                        name:"赵六",
                        sex:"1",
                        age:22,
                        phone:1592837512,
                        good:"Ruby",
                        habit:["3","7","8"],
                    },
                ],
            },
            methods:{
                submit_info(){
                    let tag = null;
                    let test_arr = [
                        this.id,
                        this.name,
                        this.sex,
                        this.age,
                        this.phone,
                        this.good,
                        this.habit
                    ];
                    console.log(test_arr);
                    for(let i=0;i< test_arr.length;i++){
                        if(test_arr[i] == ""){
                            tag = true;
                            break;
                        }else{
                            tag = false;
                        }
                    }
                    if(tag){
                        alert("输入的内容有空！")
                    }else{
                        this.users.push({
                            "id":this.id,
                            "name":this.name,
                            "sex":this.sex,
                            "age":this.age,
                            "phone":this.phone,
                            "good":this.good,
                            "habit":this.habit
                        })
                        
                    }
                   
                    this.id++
                    this.name="",
                    this.sex="",
                    this.age="",
                    this.phone="",
                    this.good="",
                    this.habit=[]
                },
                del(index){
                    this.users.splice(index,1)
                },
                get_sort(){
                    console.log("排序！");
                    console.log(this.num);
                    if(this.num%2 == 0){
                        this.num++
                        this.users = this.users.sort((a,b)=>{
                            console.log("升序排序");
                            return a.age - b.age
                        })
                    }else{
                        this.num--;
                        this.users = this.users.sort((a,b)=>{
                            console.log("降序排序");
                            return b.age - a.age
                        })

                    }
                    
                }
            },
            filters:{
                // 标记一下：filters中的this，指向的是window。正常情况下很难获取到vue中定义的habit
                // 如何解决：将 这个habit对象放到filters函数里面，这样就能解决了
                // 关于返回值，如何返回数组，无法通过 拓展运算符展开内容，我们可以通过字符串解决。
                get_habit(arr){
                    const habit_arr= {
                        "0":"篮球",
                        "1":"足球",
                        "2":"排球",
                        "3":"羽毛球",
                        "4":"乒乓球",
                        "5":"毽球",
                        "6":"游泳",
                        "7":"跑步",
                        "8":"健身"
                    };
                    // console.log(arr);
                    let new_arr = [];
                    let str = "";
                    // console.log(this.Vue);
                    for(let i=0;i<arr.length;i++){
                        // new_arr.push(habit[i])
                        if(i == arr.length -1){
                            str +=  habit_arr[arr[i]]
                        }else{
                            str += habit_arr[arr[i]]+"、"
                        }
                    }
                    // arr.forEach(function(item){
                    //     console.log(this);
                    //     console.log(this.habit[item]);
                    //     new_arr.push(habit[item])
                    // });
                    // console.log(new_arr);
                    return str
                }
            }
        })
    </script>
</body>
</html>